<template>
  <div>
    <el-menu
      :collapse="!showSliderGetters"
      :collapse-transition="false"
      default-active="data-management"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
      unique-opened
      router
      style="border: none;z-index: 99"
    >
      <template v-if="navigations.length">
        <template v-for="level1 in navigations">
          <el-submenu v-if="hasChildren(level1)" :index="level1.index" :key="level1.index">
            <template slot="title">
              <i :class="level1.icon"></i>
              <span>{{level1.name}}</span>
            </template>
            <template v-for="level2 in level1.child">
              <el-submenu v-if="hasChildren(level2)" :index="level2.index" :key="level2.index">
                <template slot="title">{{level2.name}}</template>
                <el-menu-item
                  v-for="level3 in level2.child"
                  :index="level3.index"
                  :key="level3.index"
                >{{level3.name}}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="level2.index" :key="level2.index">{{level2.name}}</el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="level1.index" :key="level1.index">
            <i :class="level1.icon"></i>
            <span>{{level1.name}}</span>
          </el-menu-item>
        </template>
      </template>
      <!-- <template v-if="navigations.length">
        <el-submenu v-for="level1 in navigations" :index="level1.index" :key="level1.index">
          <template slot="title">
            <i :class="level1.icon"></i>
            <span>{{level1.name}}</span>
          </template>
          <template v-if="hasChildren(level1)">
            <template v-for="level2 in level1.child">
              <el-submenu v-if="hasChildren(level2)" :index="level2.index" :key="level2.index">
                <template slot="title">{{level2.name}}</template>
                <el-menu-item
                  v-for="level3 in level2.child"
                  :index="level3.index"
                  :key="level3.index"
                >{{level3.name}}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="level2.index" :key="level2.index">{{level2.name}}</el-menu-item>
            </template>
          </template>
        </el-submenu>
      </template>-->
    </el-menu>
  </div>
</template>

<script>
import { get } from 'lodash'
import { mapGetters } from 'vuex'
import { COOKIE_LIST } from '@/util/constant'
import Cookie from 'js-cookie'
import { NAVIGATION_DATA_ADMIN, NAVIGATION_DATA_CHECK, NAVIGATION_DATA_ENGINER } from '@/util/constant'

export default {
  name: 'navigation',
  data() {
    return {
      navigations: []
    }
  },
  methods: {
    hasChildren: function(object) {
      return get(object, 'child') && object.child.length
    },
    // 读取角色，并根据角色判断使用哪个菜单栏
    dealNavigations(){
      const role = Cookie.get('role');
      let navigation = JSON.parse(Cookie.get('navigation'))
      // 删除了 数据概览 模块
      navigation.shift()
      this.navigations = navigation
    }
  },
  computed: {
    ...mapGetters(['showSliderGetters'])
  },
  mounted() {
    // this.navigations = JSON.parse(Cookie.get(COOKIE_LIST.MENU))
    this.dealNavigations()
  }
}
</script>
